<template>
  <div id="iap-upload">
    <div class="upload-box">
      <template v-if="showType === 'p'">
        <a href="javascript:void(0);" class="upload-btn" @click="openUpload">
          <img v-if="imageUrl!==''" :src="imageUrl"/>
          <i v-else class="el-icon-plus"></i>
        </a>
        <span class="info">(建议尺寸：{{ size.width }}像素*{{size.height}}像素)</span>
      </template>
      <template v-else-if="showType === 'w'">
        <a href="javascript:void(0);" class="upload-app" @click="openUpload">{{ imageUrl === '' ? '请选择应用': '[' + imageUrl + ']' }}</a>
      </template>
    </div>
    <v-pic-select
    :title="title"
    :isShow="isUploadShow"
    @close="closeDialog"></v-pic-select>
  </div>
</template>
<script>
import VDialog from '../iDialog/iDialog'
import VPicSelect from '../iPicSelect/iPicSelect'
export default {
  name: 'iUpload',
  components: {
    VDialog,
    VPicSelect
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    picUrl: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    showType: {
      type: String,
      default: 'p'
    },
    size: {
      type: Object,
      default: function () {
        return {
          width: 120,
          height: 120
        }
      }
    }
  },
  watch: {
    picUrl: {
      handler: function (val) {
        this.checkImageUrl(val)
      },
      deep: true
    }
  },
  data () {
    return {
      imageUrl: '',
      isUploadShow: false,
      materialList: [],
      tableLoading: true,
      uploadButtons: [
        { text: '全部文件', oprType: 'allFile' }
      ]
    }
  },
  methods: {
    // 打开素材选择弹窗
    openUpload () {
      this.isUploadShow = true
    },
    // 判断图片地址
    checkImageUrl (url) {
      if (url && url !== '') {
        if (this.showType === 'p') {
          let imageType = ['png', 'jpg', 'gif', 'jpeg']
          let suffix = url.split('.').pop()
          if (imageType.indexOf(suffix) !== -1) {
            if (/^\/iap.*$/.test(url)) {
              this.imageUrl = url
            } else {
              this.imageUrl = '/iap' + url
            }
          } else {
            this.imageUrl = ''
          }
        } else {
          this.imageUrl = url
        }
      } else {
        this.imageUrl = url
      }
    },
    // 关闭弹窗
    closeDialog (data) {
      if (data !== '') {
        let zipType = ['zip', 'rar', 'jar', '7z', 'tar', 'gz']
        let imageType = ['png', 'jpg', 'gif', 'jpeg']
        let suffix = data.split('.').pop()
        if (this.showType === 'p') {
          if (zipType.indexOf(suffix) !== -1) {
            this.$message({
              type: 'info',
              message: '只能选择图片文件'
            })
            return false
          }
        } else {
          if (imageType.indexOf(suffix) !== -1) {
            this.$message({
              type: 'info',
              message: '只能选择zip压缩包'
            })
            return false
          }
        }
        this.imageUrl = data
        let obj = {
          url: this.imageUrl,
          type: this.type
        }
        this.$emit('change', obj)
      }
      this.isUploadShow = false
    }
  },
  created () {
    this.checkImageUrl(this.picUrl)
  }
}
</script>
<style lang="stylus">
#iap-upload
  background #fff
  .upload-box
    position relative
    .upload-btn
      display inline-block
      vertical-align middle
      height 150px
      width 150px
      font-size 36px
      color #eee
      margin-top 10px
      border 1px dashed #eeeeee
      cursor pointer
      position relative
      .el-icon-plus
        position absolute
        left 50%
        top 50%
        width 40px
        height 40px
        line-height 40px
        text-align center
        margin -20px 0 0 -20px
      img
        position absolute
        max-width 100%
        max-height 100%
        left 50%
        top 50%
        transform translate(-50%, -50%)
    .info
      display inline-block
      vertical-align middle
      margin-left 10px
      color #999999
    .upload-app
      display block
      padding 0 15px
      background #f5f7fa
      border 1px solid #dcdfe6
      white-space nowrap
      text-overflow ellipsis
      overflow hidden
      border-radius 4px
</style>
